<template>
    <div style="text-align:center;margin-top:150px">
            <div style="font-size:25px;color:blue">注册</div>
            <el-form :model="form" :inline="true" :rules="rules" @validate="onValidate" ref="formRef">
                <el-form-item prop="username">
                <el-input placeholder="用户名" :prefix-icon="User" type="text" v-model="form.username"/>
                </el-form-item>
                <el-form-item prop="password">
                <el-input placeholder="请输入密码" :prefix-icon="Lock" type="password" v-model="form.password"/>
                </el-form-item>
                <el-form-item prop="password_repeat">
                <el-input placeholder="请再次输入密码" :prefix-icon="Lock" type="password" v-model="form.password_repeat"/>
                </el-form-item>
                <el-form-item prop="email">
                <el-row :gutter="10" style="width:100%">
                    <el-col :span="15" >
                        <el-input placeholder="邮箱" :prefix-icon="EditPen" type="email" v-model="form.email" style="margin-left:75px"/>
                    </el-col>
                    <el-col :span="1">
                        <el-button :disabled="!isEmailValidate" type="success" style="margin-left:70px" @click="sendCode()">获取验证码</el-button>
                    </el-col>
                </el-row>
                </el-form-item>
                <el-form-item prop="code">
                <el-input placeholder="验证码" :prefix-icon="Lock" type="text" v-model="form.code"/>
                </el-form-item>
            <div>
                    <el-button type="success" style="width:100px;margin-left:30px;margin-top:30px" @click="register()">立即注册</el-button>
            </div>
            <div style="margin-top:20px">
                <span style="font-size:14px;line-height:15px;color:grey">已有帐号？</span>
                <el-link type="primary" style="translate:0 -2px" @click="router.push('/')">立即登录</el-link>
            </div>
            </el-form>
    </div>
</template>
<script setup>
import {User,Lock,EditPen} from '@element-plus/icons-vue'
import router from '@/router'
import { reactive,ref } from 'vue'
import {ElMessage} from 'element-plus'
import { post } from '@/utils/request.js'

const form=reactive({
username:'',
password:'',
password_repeat:'',
email:'',
code:''
})


const validateUsername=(rule,value,callback)=>{
if(value=='')callback(new Error('请输入用户名'))
else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
callback(new Error('用户名不能包含特殊字符，只能是中文/英文'))
}else callback()
}

const validatePassword=(rule,value,callback)=>{
if(value=='')callback(new Error('请再次输入密码'))
else if(value!=form.password){
callback(new Error('两次输入的密码不一致'))
}else callback()
}

const rules={
username:[
{validator:validateUsername,trigger:['blur','change']},
{min:2,max:8,message:'用户名长度必须在2-8字符之间',trigger:['blur','change']}
],

password:[
{required:true,message:'请输入密码',trigger:'blur'},
{min:6,max:16,message:'密码长度必须在6-16字符之间',trigger:['blur','change']}
],

password_repeat:[{validator:validatePassword,trigger:['blur','change']}],

email:[
{required:true,message:'请输入邮件地址',trigger:'blur'},
{type:'email',message:'请输入合法的邮件地址',trigger:['blur','change']
}
],
code:[
{required:true,message:'请输入验证码',trigger:'blur'}
]
}

const formRef=ref()
const isEmailValidate=ref(false)
const onValidate=(prop,isValid)=>{
if(prop=='email')
isEmailValidate.value=isValid
}

const sendCode=()=>{

post('/needcode',{
  email:form.email
},(message)=>{
ElMessage.success(message)
},(data)=>{
ElMessage.warning(data)
})

}

const register=()=>{
formRef.value.validate((isValid)=>{
if(isValid){
post('/registers',{
username:form.username,
password:form.password,
email:form.email,
code:form.code
},(message)=>{
ElMessage.success(message)
router.push('/')
},(data)=>{
ElMessage.warning(data)
})
}else{
ElMessage.warning('请完整填写表单信息')
}
})
}

</script>
<style scoped>
</style>